<template>
    <BasicLayout>
        <template #wrapper>
            <el-card class="box-card">
                <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="queryParams.nickname" placeholder="请输入用户昵称" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="支付宝账号" prop="aliPay">
                        <el-input v-model="queryParams.aliPay" placeholder="请输入支付宝账号" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
<!--                    <el-form-item label="用户性别" prop="sex">-->
<!--                        <el-select v-model="queryParams.sex" placeholder="请输入用户的性别" clearable size="small">-->
<!--                            <el-option v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="用户状态" prop="isBanned">
                        <el-select v-model="queryParams.isBanned" placeholder="状态" clearable size="small">
                            <el-option v-for="dict in isBannedOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button v-permisaction="['platform:user:add']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-permisaction="['platform:user:edit']" type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-permisaction="['platform:user:remove']" type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
                            删除
                        </el-button>
                    </el-col>
                </el-row>

                <el-table v-loading="loading" :data="bwuserList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="头像" align="center" prop="avatar" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-image style="width: 48px; height:48px;border-radius: 48px;" :src="scope.row.avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column label="昵称" align="center" prop="nickname" :show-overflow-tooltip="true" />
                    <el-table-column label="姓名" align="center" prop="userName" :show-overflow-tooltip="true" />
                    <el-table-column label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true" />
                    <el-table-column label="支付宝账号" align="center" prop="aliPay" :show-overflow-tooltip="true" />
<!--                    <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true">-->
<!--                        <template slot-scope="scope">-->
<!--                            <span v-if="scope.row.sex == '3'">未知</span>-->
<!--                            <span v-else>{{ scope.row.sex == '1' ? '男' : '女' }}</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="剩余积分" align="center" prop="integral" :show-overflow-tooltip="true" />
                    <el-table-column label="状态" align="center" prop="isBanned" :formatter="isBannedFormat" width="100">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isBannedFlag" @change="changeUserBanned(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <!-- <div> -->
                                <el-button v-permisaction="['platform:user:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                               <!-- <el-button v-permisaction="['platform:user:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> -->
                           <!-- </div>
                            <div> -->
                                <el-button v-permisaction="['platform:user:edit']" size="mini" type="text" icon="el-icon-coin" @click="showListDialog(scope.row, '积分流水')">积分流水</el-button>
                                <el-button v-permisaction="['platform:user:edit']" size="mini" type="text" icon="el-icon-tickets" @click="showListDialog(scope.row, '订单列表')">
                                    订单列表
                                </el-button>
                            <!-- </div> -->
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="getList" />

                <!-- 添加或修改对话框 -->
                <el-dialog :title="title" :visible.sync="open" width="800px">
                    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                        <el-form-item label="用户头像" prop="avatar"><el-image style="width: 90px; height:90px;border-radius: 90px;" :src="form.avatar" /></el-form-item>
                        <el-form-item label="支付宝账号" prop="aliPay"><el-input v-model="form.aliPay" placeholder="支付宝账号" /></el-form-item>
                        <el-form-item label="用户剩余积分" prop="integral">
                            <el-input-number v-model="form.integral" placeholder="用户剩余积分" />
                        </el-form-item>
                        <el-form-item label="用户昵称" prop="nickname"><el-input v-model="form.nickname" disabled placeholder="用户昵称" /></el-form-item>
                        <el-form-item label="用户姓名" prop="userName"><el-input v-model="form.userName" disabled placeholder="用户姓名" /></el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="form.phone" placeholder="手机号码" disabled oninput="value=value.replace(/[^\d]/g,'')" />
                        </el-form-item>
<!--                        <el-form-item label="用户性别" prop="sex">-->
<!--                            <el-input :value="form.sex == '3' ? '未知' : form.sex == '1' ? '男' : '女'" placeholder="用户的性别" disabled />-->
<!--                        </el-form-item>-->
                        <!-- <el-form-item label="用户生日" prop="birthday"><el-input disabled v-model="form.birthday" placeholder="生日" /></el-form-item>
                        <el-form-item label="用户所在城市" prop="city"><el-input disabled v-model="form.city" placeholder="用户所在城市" /></el-form-item>
                        <el-form-item label="用户的语言" prop="language"><el-input disabled v-model="form.language" placeholder="用户的语言" /></el-form-item>
                        <el-form-item label="用户所在省份" prop="province"><el-input disabled v-model="form.province" placeholder="用户所在省份" /></el-form-item>
                        <el-form-item label="用户所在国家" prop="country"><el-input disabled v-model="form.country" placeholder="用户所在国家" /></el-form-item> -->
                        <el-form-item label="用户备注" prop="mark"><el-input v-model="form.mark" type="textarea" placeholder="用户备注" /></el-form-item>
                        <el-form-item label="状态" prop="isBanned">
                            <el-radio-group v-model="form.isBanned">
                                <el-radio v-for="dict in isBannedOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                     <!--   <el-form-item label="下级人数" prop="spreadCount"><el-input disabled v-model="form.spreadCount" placeholder="下级人数" /></el-form-item>
                        <el-form-item label="剩余可邀请数" prop="invitationCount"><el-input disabled v-model="form.invitationCount" placeholder="剩余可邀请数" /></el-form-item>
                        <el-form-item label="推广员id" prop="spreadUid"><el-input disabled v-model="form.spreadUid" placeholder="推广员id" /></el-form-item>
                        <el-form-item label="关联推广者的时间" prop="spreadTime"><el-input disabled v-model="form.spreadTime" placeholder="关联推广者的时间" /></el-form-item>
                        <el-form-item label="最后一次登录时间" prop="lastTime"><el-input disabled v-model="form.lastTime" placeholder="最后一次登录时间" /></el-form-item>
                        <el-form-item label="最后一次登录ip" prop="lastIp"><el-input disabled v-model="form.lastIp" placeholder="最后一次登录ip" /></el-form-item>
                        <el-form-item label="上次修改" prop="lastUpdate"><el-input disabled v-model="form.lastUpdate" placeholder="上次修改" /></el-form-item>
                        <el-form-item label="openid" prop="openId"><el-input disabled v-model="form.openId" placeholder="openid" /></el-form-item>
                        <el-form-item label="Unionid" prop="unionid"><el-input disabled v-model="form.unionid" placeholder="Unionid" /></el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>

                  <el-dialog :title="listTitle" :visible.sync="listOpen" width="90vw">
                      <div>
                          <ScoreLog :user-id="listUserId" v-if="listTitle === '积分流水'"></ScoreLog>
                          <Order :user-id="listUserId" v-else-if="listTitle === '订单列表'"></Order>
                      </div>
                      <div slot="footer" class="dialog-footer">
                          <el-button @click="hideListDialog">关 闭</el-button>
                      </div>
                      </el-dialog>
            </el-card>
        </template>
    </BasicLayout>
</template>

<script>
import { addBwUser, delBwUser, getBwUser, listBwUser, updateBwUser } from '@/api/bw/platform/user/user';
import ScoreLog from '../score/scoreLog.vue';
import Order from '../order/index.vue';

export default {
    name: 'Config',
    components:{
        ScoreLog,
        Order
    },
    data() {
        return {
            listTitle: '',
            listOpen: false,
            listUserId: '',

            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            isEdit: false,
            // 类型数据字典
            typeOptions: [],
            bwuserList: [],
            isBannedOptions: [],
            sexOptions: [],
            // 查询参数
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                avatar: undefined,
                nickname: undefined,
                userName: undefined,
                phone: undefined,
                aliPay: undefined,
                sex: undefined,
                integral: undefined,
                isBanned: undefined
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                avatar: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
                nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
                userName: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
                phone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
                aliPay: [{ required: true, message: '支付宝账号不能为空', trigger: 'blur' }],
                sex: [{ required: true, message: '用户的性别不能为空', trigger: 'blur' }],
                integral: [{ required: true, message: '用户剩余积分不能为空', trigger: 'blur' }],
                isBanned: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.getList();
        this.getDicts('is_banned').then(response => {
            this.isBannedOptions = response.data;
        });
        this.getDicts('sys_user_sex').then(res => {
            this.sexOptions = res.data;
        });
    },
    methods: {
        showListDialog(row, title){
            this.listTitle = title;
            this.listOpen = true;
            this.listUserId = Number(row.userId);
        },
        hideListDialog(){
          this.listOpen = false;
          this.listTitle = '';
        },
        changeUserBanned(row) {
            row.isBanned = row.isBannedFlag ? 'T' : 'F';
            updateBwUser(row).then(response => {
                if (response.code === 200) {
                    this.msgSuccess('修改成功');
                } else {
                    this.msgError(response.msg);
                }
            });
        },

        /** 查询参数列表 */
        getList() {
            this.loading = true;
            listBwUser(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                res.data.list.forEach(item => {
                    item.isBannedFlag = item.isBanned === 'T';
                });
                this.bwuserList = res.data.list;
                this.total = res.data.count;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                userId: undefined,
                avatar: undefined,
                nickname: undefined,
                userName: undefined,
                phone: undefined,
                aliPay: undefined,
                wechatPayCode: undefined,
                sex: undefined,
                mark: undefined,
                invitationCount: undefined,
                integral: undefined,
                lastTime: undefined,
                lastIp: undefined,
                isBanned: undefined,
                spreadUid: undefined,
                spreadTime: undefined,
                spreadCount: undefined,
                isNew: undefined,
                birthday: undefined,
                lastUpdate: undefined,
                openId: undefined,
                city: undefined,
                language: undefined,
                province: undefined,
                country: undefined,
                unionid: undefined
            };
            this.resetForm('form');
        },
        isBannedFormat(row) {
            return this.selectDictLabel(this.isBannedOptions, row.isBanned);
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageIndex = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm('queryForm');
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = '添加会员用户表';
            this.isEdit = false;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const userId = row.userId || this.ids;
            getBwUser(userId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = '修改会员用户表';
                this.isEdit = true;
            });
        },
        /** 提交按钮 */
        submitForm: function() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.userId !== undefined) {
                        updateBwUser(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功');
                                this.open = false;
                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        addBwUser(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('新增成功');
                                this.open = false;
                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const Ids = row.userId || this.ids;
            this.$confirm('是否确认删除编号为"' + Ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delBwUser(Ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        }
    }
};
</script>
